<template>
  <div style="background: #fff;">

    <!-- 系统默认的操作处理 -->
    <a-dropdown :trigger="['click']">
      <a-button type="default" size="small" @click="e => e.preventDefault()">
        <a-icon type="setting" theme="filled"/>
        <span>操作</span>
      </a-button>
      <a-menu slot="overlay">

        <!-- 删除 -->
        <a-menu-item>
          <a-popconfirm
            :title="$t('app.setting.popconfirm.ask')"
            :ok-text="$t('app.setting.popconfirm.delete')"
            :cancel-text="$t('app.setting.popconfirm.cancel')"
            @confirm="deleteConfirm(record.id)">
            <a-button type="danger" size="small">
              <a-icon type="delete" />
              <span>删除11</span>
            </a-button>
          </a-popconfirm>
        </a-menu-item>
        
        <!-- 详情 -->
        <a-menu-item>
          <a-button type="primary" size="small" @click="showDetailModal">
            <a-icon type="container" />
            <span>详情11</span>
          </a-button>
        </a-menu-item>
        
        <!-- 编辑 -->
        <a-menu-item>
          <a-button type="primary" size="small" @click="showEditModal">
            <a-icon type="container" />
            <span>编辑11</span>
          </a-button>
        </a-menu-item>

        <!-- 此项进行动态适配处理 -->
        <a-menu-item v-for="(item, index) in loopData" :key="index">
          <a-button type="primary" size="small" @click="dynamicAction">
            <a-icon type="container" />
            <span>{{ item.actionName }}</span>
          </a-button>
        </a-menu-item>

        
      </a-menu>
    </a-dropdown>

  </div>
</template>

<script>

import { i18nRender } from '@/locales'
import { setDocumentTitle, domTitle } from '@/utils/domUtil'
import store from '../../../src/store'

export default {
  name: 'LineAction',
  components: {
  
  },
  
  props: {
    record: Object ,
    loopData: Array
    // loopData:[
    //   { actionName: 编辑, },
    //   { actionName: 编辑, },
    //   { actionName: 编辑, },
    //   { actionName: 编辑, },
    //   { actionName: 编辑, },
    // ]
  },

  data () {
    return {
      
    }
  },

  created(){
  
  },

  mounted(){

  },

  methods: {

    // 动态的点击事件的处理,显示对应的 modal 
    dynamicAction(){
      console.log("显示对应的 - modal - ");
    },

    deleteConfirm(id){
      console.log("测试一下这个表格内部的操作的删除的id的参数是什么-id-", id);
      this.$emit("deleteConfirm", id)
    }
  }
}
</script>

<style lang="less" scoped>
  
</style>
